/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* model */
import { ChartSparePart } from '@model/param/out/Chart'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, watch, Ref, ref, computed, onMounted } from 'vue'
// API
import * as ReportApi from '@src/api/ReportApi';
import { CommonComponentInstance } from '@model/VC'

type HandlerSparePartChangeFunctionType = (value: string[]) => void;

type fetchChartSparePartParams = {
  repertoryIdList: any;
  keyWord: string;
  page: number;
  pageSize: number;
}
interface ChartSparePartSelectSetupState {
  // 备件品类列表改变事件
  handlerSparePartChange: HandlerSparePartChangeFunctionType;
  // 获取备件品类列表
  searchChartSparePart: (fetchParams: fetchChartSparePartParams) => any;
  // 图表备件品类列表
  sparePartList: Ref<ChartSparePart[]>;
  // loading
  loading: Ref<boolean>;
}

enum ChartSparePartSelectEventEnum {
  Input = 'input'
}

export type ChartSparePartSelectProps = {
  // 备件品类id
  value: string[];
  // 仓库id
  repertory: string;
}

export type ChartSparePartSelectInstance = ComponentInstance & ChartSparePartSelectSetupState
export type ChartSparePartSelectVM = ComponentRenderProxy<ChartSparePartSelectProps> & CommonComponentInstance

export default defineComponent<ChartSparePartSelectProps,ChartSparePartSelectSetupState>({
	name: ComponentNameEnum.ChartSparePartSelect,
	props: {
		value: {
			type: Array,
			default: () => []
		},
    repertory: {
      type: String,
      default: ''
    }
	},
	setup(props: ChartSparePartSelectProps, { emit }) {
		const sparePartList: Ref<ChartSparePart[]> = ref([])
    const loading = ref(false)

    const repertoryIds = computed(() => props.repertory)

    watch(repertoryIds, (n) => {
      // @ts-ignore
      searchChartSparePart()
    })

		/** 
     * @description: 仓库列表改变事件
    */
		 const handlerSparePartChange: HandlerSparePartChangeFunctionType = (value: string[]) => {
      let sparepartIds = value.map((item: any) => item.value)
      emit(ChartSparePartSelectEventEnum.Input, sparepartIds)
    }

    /**
     * @description: 获取备件品类列表
    */
    const searchChartSparePart = async (params: any) => {
      try {
        const sparePartParams = {
          keyWord: params?.keyword || '',
          page: params?.pageNum || 1,
          pageSize: params?.pageSize || 10,
          repertoryIdList: repertoryIds.value ? [repertoryIds.value] : []
        }
          
        const { data: result } = await ReportApi.getSparepart(sparePartParams)
        if (!result || !result.list) return
        result.list = result.list.map((sparepart: any) => sparepartSelectConversion(sparepart))
        return result
      } catch (error) {
        console.log(error)
      }
    }

    /**
     * @description: 备件select数据转换
    */
    const sparepartSelectConversion = (sparepart: any): any => {
      let { name, id } = sparepart
      return Object.freeze({
        label: name,
        value: id
      })
    }
    
    onMounted(() => {
      // @ts-ignore
      searchChartSparePart()
    })

		return {
      loading,
			sparePartList,
			handlerSparePartChange,
      searchChartSparePart
		}
	},
	render() {
		return (
			<biz-remote-select
        value={this.value}
        placeholder="请输入关键字搜索备件品类"
        class="task-span"
        multiple
        cleared
        collapse-tags
        remoteMethod={this.searchChartSparePart}
        onInput={this.handlerSparePartChange}
      >
      </biz-remote-select>
		)
	}
})